import React, { Component } from 'react';
import './index.css'

class LoadIcon extends Component {
  constructor(data) {
    super(data)
    this.state = {
      iconClassName: 'frame00'
    }
    this.count = 0
  }
  componentDidMount() {

    let initWay=this.props.init.way

    if(initWay=='SpritFrame'){
      let SpritFrame=this.props.init.SpritFrame
      this.initBySprit(SpritFrame)
    }
    

    // this.initCircle()
  }
  // 采用精灵图切换背景位置的方式
  initBySprit(SpritFrame){
    // 帧数
    // let imgNum = 22
    // // 没一帧的宽度
    // let width = 180
    // // 切一帧的时间
    // let time = 100 / imgNum
    // let frame = ''
    // for (let i = 0; i <= imgNum; i++) {
    //   frame += (parseInt(i * time) + '%{background-position:' + i * width + 'px 0}' + '\n')
    // }
    // frame = '@keyframes test{' + '\n' + frame + '}'
    // frame += '\n' + '.css3Supprot{animation: 1s test linear infinite;}'
    // console.log(frame);
    // // // 创建style标签
    // const style = document.createElement('style');
    // // // 设置style属性
    // // style.type = 'text/css';
    // // 将 keyframes样式写入style内
    // style.innerHTML = frame;
    // // 将style样式存放到head标签
    // document.getElementsByTagName('head')[0].appendChild(style);
    let imgNum = SpritFrame.FrameCount
    let width = SpritFrame.EachFrameWidth
    let alltime=SpritFrame.FrameAlltime
    this.tempArr=[]
    let str=''
    for (let i = 0; i <= imgNum; i++) {
      str=i * width+'px'
      this.tempArr.push(str)
    }
    console.log(this.tempArr);
    let count=0
    let icon=document.getElementById('loading-icon')
    setInterval(() => {
      count++
      icon.style.backgroundPosition=this.tempArr[count]+' 0'
      // count==imgNum?count=0:''
      if(count==imgNum){
        count=0
      }
    }, alltime/imgNum);
  }
  initCircle() {
    // this.setState({
    //   iconClassName: 'css3Supprot'
    // })


    // setInterval(() => {
    //   this.count++
    //   this.setState({
    //     iconClassName: 'frame' + this.count
    //   }, () => {
    //     if (this.count == 22) {
    //       this.count = 0
    //     }
    //   })
    // }, 40);

  }
  render() {
    console.log(this.props.Frame);
    return (
      <div id='loading-icon' className={[this.state.iconClassName,this.props.IconclassName,'loading-icon'].join(' ')}>

      </div>
    )
  }
}
export default LoadIcon